<template>
    <div class="article-list">
        <div class="article-list-card">
            <div class="article-list-height">
                <Button class="article-list-rightBtn" type="primary" size="large" @click="modal2 = true"><Icon type="plus-round"></Icon>新增商品</Button>
            </div>
            <i-table height="680" stripe :columns="columns" :data="data"></i-table>
            <div style="padding: 15px;">
                <Page @on-page-size-change="changeTiao" @on-change="changePage" :current="index" :total="total" show-elevator show-sizer :placement="'top'" :page-size="page_con" :page-size-opts="[10, 15, 20, 30, 40, 50]"></Page>
            </div>
        </div>
        <Modal v-model="modal2">
            <p slot="header" style="text-align:center">
                <Icon type="information-circled"></Icon>
                <span>修改商品</span>
            </p>
            <div style="text-align:center">
                <i-form :model="formItem" :label-width="80">
                    <Form-item label="标题">
                        <i-input v-model="formItem.name" placeholder="请输入标题"></i-input>
                    </Form-item>
                    <Form-item label="价格">
                        <Input-number v-model="formItem.price" placeholder="请输入价格" style="width: 100%"></Input-number>
                    </Form-item>
                    <Form-item label="描述">
                        <i-input type="textarea" v-model="formItem.content" placeholder="请输入描述"></i-input>
                    </Form-item>
                    <Form-item label="状态" style="text-align: left">
                        <i-switch v-model="formItem.status">
                            <span slot="open">开</span>
                            <span slot="close">关</span>
                        </i-switch>
                    </Form-item>
                    <Form-item label="图片">
                        <Upload
                          :show-upload-list="false"
                          :format="['jpg','jpeg','png']"
                          :max-size="2048"
                          :before-upload="handleBeforeUpload"
                          multiple
                          type="drag"
                          action="//jsonplaceholder.typicode.com/posts/"
                          style="width:100px;">
                            <div style="width: 100px;height:100px;line-height: 100px;" v-if="!formItem.pic">
                                <Icon type="camera" size="30"></Icon>
                            </div>

                            <img v-else :src="formItem.pic" alt="" style="width: 100px;height:100px;">
                        </Upload>
                    </Form-item>
                </i-form>

            </div>
            <div slot="footer">
                <Button type="primary" size="large" long :loading="modal_loading" @click="submitGood">修改</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
    export default {
        name:"article-list",
        data(){
            return{
                columns:[
                    {
                        title: '名称',
                        key: 'name',
                        // width: 100,
                        align:"center",
                    },

                    {
                        title: '价格',
                        key: 'price',
                        align:"center",
                    },

                    {
                        title: '描述',
                        key: 'desc',
                        align:"center",
                        render:(h,params)=>{
                            return h('span',{
                                domProps: {
                                    innerHTML: params.row.desc
                                },
                                style:{
                                    display: '-webkit-box',
                                    overflow: 'hidden',
                                    height:'40px'

                                }

                            })
                        }
                    },
                    {
                        title: '图片',
                        key: 'pic',
                        align:"center",
                        width:100,
                        render:(h,params)=>{
                            if(params.row.pic==""){
                                return "暂无"
                            }else{
                                return h("div",{
                                    style:{
                                        cursor: "pointer",
                                    },
                        on:{
                            mouseover:(e)=>{
                                this.$store.commit("setImgData",{
                                    src:e.target.src||e.target.getElementsByTagName("img")[0].src||"",
                                    x:e.x+50+"px",
                                    y:e.y-60+"px",
                                })
                            },
                            mousemove:(e)=>{
                                this.$store.commit("setImgData",{
                                    src:e.target.src||e.target.getElementsByTagName("img")[0].src||"",
                                    x:e.x+50+"px",
                                    y:e.y-60+"px",
                                })
                            },
                            mouseout:(e)=>{
                                this.$store.commit("setImgData",{
                                    src:"",
                                    x:"0px",
                                    y:"0px",
                                })
                            }
                        }
                    },[
                                    h("img",
                                        {
                                            attrs:{
                                                src:params.row.pic
                                            },
                                            style:{
                                                width:"42px",
                                                height:"42px",
                                                borderRadius:"4px",
                                                margin:"0px auto",
                                                display:"block",
                                            },
                                        })
                                ])
                            }
                        }
                    },

                    {
                        title: '状态',
                        key: 'status',
                        align:"center",
                        width: 100,
                        render:(h,params)=>{
                            return h("span",{}, params.row.status === '1'?'启用':'禁用')
                        }
                    },
                    {
                        title: '创建时间',
                        key: 'add_time',
                        align:"center",
                        render:(h,params)=>{
                            return this.timeFormat(params.row.create_time)
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        align: 'center',
                        width: 250,
                        render: (h, params) => {
                            return h('ButtonGroup', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                    },
                                    on: {
                                        click: () => {
                                            this.editProduct(params.row.id)
                                        }
                                    }
                                },"修 改"),
                            ]);
                        }
                    },
                ],
                data:[],
                total:0,
                index:1,
                page_con:15,
                modal2:false,
                modal3:false,
                doIndex:0,//操作的下标
                modal_loading:false,
                formItem: {
                    id: undefined,
                    name: '',
                    price: null,
                    content: '',
                    status: false,
                    pic: ''
                }
            }
        },
        activated(){
            this.getArticleList()
        },
        methods:{
            getArticleList(){
                this.getJsonData("Goods/getGoodsList",{num:this.page_con,page:this.index})
                    .then((res)=>{
                        this.data=res.data
                        this.total=parseInt(res.count)
                    })
            },
            changePage(n){
                this.index=n
                this.getArticleList()
            },
            changeTiao(num){
                this.page_con=num
                this.index=1
                this.getArticleList()
            },
            editProduct(id) {
                this.modal2 = true;
                //getGoodsDetail
                this.getJsonData("Goods/getGoodsDetail",{id}).then((res) =>{
                    this.formItem = {
                        id,
                        name: res.data.name,
                        price: parseFloat(res.data.price),
                        content: res.data.desc,
                        status: res.data.status === '1',
                        pic: res.data.pic
                    }
               })
            },
            handleBeforeUpload(file) {
                console.log(file);
                const render = new FileReader();
                render.readAsDataURL(file);
                render.onload = (res) => {
                    this.upBaseImg("User/uploadPic",{image: res.target.result})
                      .then((res) =>{
                          this.formItem.pic = res.url;
                      })
                }

                return false;
            },
            submitGood() {
                console.log(this.formItem);
                const obj = {...this.formItem};
                obj.status = this.formItem.status ? 1 : -1
                if(this.formItem.id) {
                    this.getJsonData("Goods/updateGoods",obj)
                      .then((res)=>{
                          this.$Message.success('修改成功');
                          this.modal2 = false;
                          this.formItem = {
                              id: undefined,
                              name: '',
                              price: null,
                              content: '',
                              status: false,
                              pic: ''
                          }
                          this.getArticleList();
                      })
                } else {
                    this.getJsonData("Goods/addGoods",obj)
                      .then((res)=>{
                          this.$Message.success('添加成功');
                          this.modal2 = false;
                          this.formItem = {
                              id: undefined,
                              name: '',
                              price: null,
                              content: '',
                              status: false,
                              pic: ''
                          }
                          this.getArticleList();
                      })
                }
            }
        }
    }
</script>
<style lang="less">
    @import "./article-list";
</style>
